﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>电瓶车客户端</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="/favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">
    <style>
        /** {
            touch-action: none;
        }*/
        .list-block .item-title.label {
            width: 45%;
            -webkit-flex-shrink: 0;
            -ms-flex: 0 0 auto;
            -webkit-flex-shrink: 0;
            flex-shrink: 0;
            margin: 4px 0;
        }

        .img-div {
            border: 1px solid #ddd;
            /* border-radius: 100%; */
            float: left;
            line-height: 1;
            margin-left: 10px;
            overflow: hidden;
            height: 6rem
        }
    </style>
</head>
<body>
    <!-- page集合的容器，里面放多个平行的.page，其他.page作为内联页面由路由控制展示 -->
    <div class="page-group">
        <div class="page page-current" id='router'>
            <header class="bar bar-nav" style="background-color:black">
                <a class="button button-link button-nav pull-left back">
                    <span class="icon icon-left"></span>
                    返回
                </a>
                <h1 class='title' style="color:white">添加车辆</h1>
            </header>
            <div class="content" id="el">
                <div class="list-block">
                    <ul>
                        <!-- Text inputs -->
                        <li>
                            <div class="item-content">
                                <div class="item-media"><i class="icon icon-form-name"></i></div>
                                <div class="item-inner">
                                    <div class="item-title label">车主姓名</div>
                                    <div class="item-input">
                                        <input type="text" placeholder="" v-model="car_info.name" id="name">
                                    </div>
                                </div>
                            </div>
                        </li>
                        <!-- Date -->
                        <li>
                            <div class="item-content">
                                <div class="item-media"><i class="icon icon-form-calendar"></i></div>
                                <div class="item-inner">
                                    <div class="item-title label">身份证号</div>
                                    <div class="item-input">
                                        <input type="text" placeholder="" v-model="car_info.id_card" id="id_card">
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="align-top">
                            <div class="item-content">
                                <div class="item-media"><i class="icon icon-form-comment"></i></div>
                                <div class="item-inner">
                                    <div class="item-title label">手机号码</div>
                                    <div class="item-input">
                                        <input type="number" placeholder="" v-model="car_info.phone_number" id="phone_number">
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="align-top">
                            <div class="item-content">
                                <div class="item-media"><i class="icon icon-form-comment"></i></div>
                                <div class="item-inner">
                                    <div class="item-title label">车辆型号</div>
                                    <div class="item-input">
                                        <select title="请选择一项" v-model="car_info.car_model" id="car_model">
                                            <option value="1">二轮电动车</option>
                                            <option value="2">三轮电动车</option>
                                            <option value="3">二轮摩托车</option>
                                            <option value="4">三轮摩托车</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="align-top">
                            <div class="item-content">
                                <div class="item-media"><i class="icon icon-form-comment"></i></div>
                                <div class="item-inner">
                                    <div class="item-title label">车架号</div>
                                    <div class="item-input">
                                        <input type="text" placeholder="" v-model="car_info.car_frame_number" id="car_frame_number">
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="align-top">
                            <div class="item-content">
                                <div class="item-media"><i class="icon icon-form-comment"></i></div>
                                <div class="item-inner">
                                    <div class="item-title label">防盗编号</div>
                                    <div class="item-input">
                                        <input type="text" placeholder="" v-model="car_info.robber_number" id="robber_number">
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="align-top">
                            <div class="item-content">
                                <div class="item-media"><i class="icon icon-form-comment"></i></div>
                                <div class="item-inner">
                                    <div class="item-title label">是否新车</div>
                                    <div class="item-input">
                                        <select title="请选择一项" v-model="car_info.is_newcar" id="is_newcar">
                                            <option value="1">新车</option>
                                            <option value="0">旧车</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="align-top">
                            <div class="item-content">
                                <div class="item-media"><i class="icon icon-form-comment"></i></div>
                                <div class="item-inner">
                                    <div class="item-title label">车牌号</div>
                                    <div class="item-input">
                                        <input type="text" placeholder="" v-model="car_info.car_brand" id="car_brand">
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="align-top">
                            <div class="item-content">
                                <div class="item-media"><i class="icon icon-form-comment"></i></div>
                                <div class="item-inner">
                                    <div class="item-title label">车辆被盗保险单</div>
                                    <div class="item-input">
                                        <select title="请选择一项" v-model="car_info.car_robber_form" id="car_robber_form">
                                            <option value="1">车辆被盗保险0年</option>
                                            <option value="2">车辆被盗保险1年</option>
                                            <option value="3">车辆被盗保险2年</option>
                                            <option value="4">车辆被盗保险3年</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="align-top">
                            <div class="item-content">
                                <div class="item-media"><i class="icon icon-form-comment"></i></div>
                                <div class="item-inner">
                                    <div class="item-title label">保单号生效日期</div>
                                    <div class="item-input">
                                        <input type="text" placeholder="" v-model="car_info.form_effective_time" id="form_effective_time">
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="align-top">
                            <div class="item-content">
                                <div class="item-media"><i class="icon icon-form-comment"></i></div>
                                <div class="item-inner">
                                    <div class="item-title label">三者责任保险单</div>
                                    <div class="item-input">
                                        <select title="请选择一项" v-model="car_info.obligation_form" id="obligation_form">
                                            <option value="1">三者责任保险0年</option>
                                            <option value="2">三者责任保险1年</option>
                                            <option value="3">三者责任保险2年</option>
                                            <option value="4">三者责任保险3年</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="align-top">
                            <div class="item-content">
                                <div class="item-media"><i class="icon icon-form-comment"></i></div>
                                <div class="item-inner">
                                    <div class="item-title label">地区</div>
                                    <div class="item-input">
                                        <select title="请选择一项" v-model="car_info.locality" id="locality">
                                            <option value="1">温州</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="align-top">
                            <div class="item-content">
                                <div class="item-media"><i class="icon icon-form-comment"></i></div>
                                <div class="item-inner">
                                    <div class="item-title label">意外伤害保险单</div>
                                    <div class="item-input">
                                        <select title="请选择一项" v-model="car_info.hurt_form" id="hurt_form">
                                            <option value="1">意外伤害保0年</option>
                                            <option value="2">意外伤害保1年</option>
                                            <option value="3">意外伤害保2年</option>
                                            <option value="4">意外伤害保3年</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="align-top">
                            <div class="item-content">
                                <div class="item-media"><i class="icon icon-form-comment"></i></div>
                                <div class="item-inner">
                                    <div class="item-title label">登记人</div>
                                    <div class="item-input">
                                        <input type="text" placeholder="" v-model="car_info.registrant" id="registrant">
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="align-top">
                            <div class="item-content">
                                <div class="item-media"><i class="icon icon-form-comment"></i></div>
                                <div class="item-inner">
                                    <div class="item-title label">增加保险</div>
                                    <div class="item-input">
                                        <select title="请选择一项" v-model="car_info.add_form" id="add_form">
                                            <option value="1"> 增加保险1年</option>
                                            <option value="2"> 增加保险2年</option>
                                            <option value="3"> 增加保险3年</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="align-top">
                            <div class="item-content">
                                <div class="item-media"><i class="icon icon-form-comment"></i></div>
                                <div class="item-inner">
                                    <div class="item-title label">增加保额</div>
                                    <div class="item-input">
                                        <input type="text" placeholder="" v-model="car_info.add_coverage" id="add_coverage">
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="align-top">
                            <div class="item-content">
                                <div class="item-media"><i class="icon icon-form-comment"></i></div>
                                <div class="item-inner">
                                    <div class="item-title label">购买日期</div>
                                    <div class="item-input">
                                        <input type="date" placeholder="" v-model="car_info.buying_time" id="buying_time">
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="align-top">
                            <div class="item-content">
                                <div class="item-media"><i class="icon icon-form-comment"></i></div>
                                <div class="item-inner">
                                    <div class="item-title label">地址</div>
                                    <div class="item-input">
                                        <input type="text" placeholder="" v-model="car_info.address" id="address">
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="align-top">
                            <div class="item-content">
                                <div class="item-media"><i class="icon icon-form-comment"></i></div>
                                <div class="item-inner">
                                    <div class="item-title label">备注</div>
                                    <div class="item-input">
                                        <input type="text" placeholder="" v-model="car_info.remarks" id="remarks">
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="align-top">
                            <div class="item-content">
                                <div class="item-media"><i class="icon icon-form-comment"></i></div>
                                <div class="item-inner">
                                    <div class="item-title label">照片1</div>
                                    <div class="item-input">
                                        <input type="file" id="xdaTanFileImg1" multiple="multiple" name="fileAttach" @change="xmTanUploadImg($event,1)" style="display:none" />
                                        <img style="width:100px;height:100px;margin-left:0.5rem;margin-top: 1.5rem;" src="img/upicon.png" @click="input(1)" id="imgadd1" />
                                        <div class="img-box" id="imgboxid1">
                                        </div>
                                        <div id="xmTanDiv1"></div><br />
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="align-top">
                            <div class="item-content">
                                <div class="item-media"><i class="icon icon-form-comment"></i></div>
                                <div class="item-inner">
                                    <div class="item-title label">照片2</div>
                                    <div class="item-input">
                                        <input type="file" id="xdaTanFileImg2" multiple="multiple" name="fileAttach" @change="xmTanUploadImg($event,2)" style="display:none" />
                                        <img style="width:100px;height:100px;margin-left:0.5rem;margin-top: 1.5rem;" src="img/upicon.png" @click="input(2)" id="imgadd2" />
                                        <div class="img-box" id="imgboxid2">
                                        </div>
                                        <div id="xmTanDiv2"></div><br />
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="align-top">
                            <div class="item-content">
                                <div class="item-media"><i class="icon icon-form-comment"></i></div>
                                <div class="item-inner">
                                    <div class="item-title label">照片3</div>
                                    <div class="item-input">
                                        <input type="file" id="xdaTanFileImg3" multiple="multiple" name="fileAttach" @change="xmTanUploadImg($event,3)" style="display:none" />
                                        <img style="width:100px;height:100px;margin-left:0.5rem;margin-top: 1.5rem;" src="img/upicon.png" @click="input(3)" id="imgadd3" />
                                        <div class="img-box" id="imgboxid3">
                                        </div>
                                        <div id="xmTanDiv3"></div><br />
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="content-block">
                    <div class="row">
                        <div class="col-100"><a @click="confirm()" href="#" class="button button-big button-fill button-success">确认并提交</a></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>
    <script>
        $.init()
    </script>
    <script src="js/vue.min.js"></script>
    <script>
        function dynamicLoadJs() {
            var script = document.createElement("script");
            script.type = "text/javascript";
            script.src = "js/jquery.min.js";
            document.getElementsByTagName('body')[0].appendChild(script);
        }
        function GetQueryString(key) {
            var reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$)");
            var result = window.location.search.substr(1).match(reg);
            return result ? decodeURIComponent(result[2]) : '';
        }
        var vm = new Vue({
            el: '#el',
            data: {
                carInfo: [],
                localurl: 'http://101.132.109.236:8081',
                car_info: {
                    name: '林某',//姓名
                    phone_number: '18767479799',//手机号
                    id_card: '33038219931214693X',//身份证
                    car_model: 1,//车辆型号,1二轮电动车2.二轮摩托车3.三轮电动车4.三轮摩托车
                    car_frame_number: '888888888',//车架号
                    robber_number: '1164',//防盗编号,
                    is_newcar: 0,//是否新车,
                    car_brand: '005D',//车牌号
                    car_robber_form: 1,//车辆被盗保险单,1车辆被盗保险2年2.车辆被盗保险3年
                    form_effective_time: '',//保单生效日期
                    obligation_form: 1,//三者责任保险单，1.三者责任保险0年2.三者责任保险1年3.三者责任保险2年4.三者责任保险3年
                    locality: 1,//地区1.汩罗
                    hurt_form: 1,//意外伤害保险单，1.意外伤害保险0年2.意外伤害保险1年3.意外伤害保险2年4.意外伤害保险3年
                    registrant: '你猜', //登记人
                    add_form: 1,//增加保险，1.增加至第1年，2.增加至第2年，3.增加至第3年，
                    add_coverage: '50',//增加保额
                    buying_time: '',//购买日期
                    address: '茶山',//地址
                    remarks: '没有',//备注
                    picture1: '',//图片1
                    picture2: '',//图片2
                    picture3: '',//图片3
                    lock_state: 0,//上锁状态 1真0假
                    police_state: 0,//报警状态
                },

            },
            created: function () {
                if (GetQueryString('car_info_id')) {
                    this.car_info_id = GetQueryString('car_info_id');
                }
                if (GetQueryString('name')) {
                    this.name = GetQueryString('name');
                }
                if (GetQueryString('phone_number')) {
                    this.phone_number = GetQueryString('phone_number');
                }
                if (GetQueryString('registrant')) {
                    this.registrant = GetQueryString('registrant');
                }
            },
            methods: {
                input: function (number) {
                    $('#xdaTanFileImg' + number).click();
                },
                removeImg1: function () {
                    $("#imgboxid1").html("");
                    $('#imgadd1').css('display', 'block');
                    var file = document.getElementById('xdaTanFileImg1');
                    file.value = ''; //虽然file的value不能设为有字符的值，但是可以设置为空值
                    ////或者
                    //file.outerHTML = file.outerHTML;
                },
                removeImg2: function () {
                    $("#imgboxid2").html("");
                    $('#imgadd2').css('display', 'block');
                    var file = document.getElementById('xdaTanFileImg2');
                    file.value = ''; //虽然file的value不能设为有字符的值，但是可以设置为空值
                    ////或者
                    //file.outerHTML = file.outerHTML;
                },
                removeImg3: function () {
                    $("#imgboxid3").html("");
                    $('#imgadd3').css('display', 'block');
                    var file = document.getElementById('xdaTanFileImg3');
                    file.value = ''; //虽然file的value不能设为有字符的值，但是可以设置为空值
                    ////或者
                    //file.outerHTML = file.outerHTML;
                },
                xmTanUploadImg: function (obj, number) {
                    vm.Number = number;
                    //选择图片，马上预览
                    var fl = obj.target.files.length;
                    for (var i = 0; i < fl; i++) {
                        //vm.ImgNumber++;
                        //if (vm.ImgNumber > 3) {
                        //    $.toast("上传错误提示", "最多上传3张照片");
                        //    return;
                        //}
                        var file = obj.target.files[i];
                        var reader = new FileReader();
                        //读取文件过程方法
                        reader.onloadstart = function (e) {
                            console.log("开始读取....");
                        }
                        reader.onprogress = function (e) {
                            console.log("正在读取中....");
                        }
                        reader.onabort = function (e) {
                            console.log("中断读取....");
                        }
                        reader.onerror = function (e) {
                            console.log("读取异常....");
                        }
                        reader.onload = function (e) {
                            console.log("成功读取....");
                            var imgstr = '<img style="width:100px;height:100px;" src="' + e.target.result + '" id="img' + number + '"/><div style="text-align:center" @click="removeImg' + number + '()" id="del' + number + '"><span class="icon icon-remove"></span><div>';
                            var oimgbox = document.getElementById("imgboxid" + number);
                            var ndiv = document.createElement("div");
                            ndiv.innerHTML = imgstr;
                            ndiv.className = "img-div";
                            ndiv.id = "" + number;
                            oimgbox.appendChild(ndiv);
                            var del = document.getElementById("del" + number);
                            if (number == 1) {
                                del.addEventListener('click', vm.removeImg1, true);
                            }
                            else if (number == 2) {
                                del.addEventListener('click', vm.removeImg2, true);
                            }
                            else if (number == 3) {
                                del.addEventListener('click', vm.removeImg3, true);
                            }
                            //if (number == 1) {
                            //    vm.picture1 = e.target.result;
                            //    //alert('11111-' + vm.picture1);
                            //}
                            //else if (number == 2) {
                            //    vm.picture2 = e.target.result;
                            //    //alert('22222-' + vm.picture2);
                            //}
                            //else if (number == 3) {
                            //    vm.picture3 = e.target.result;
                            //    //alert('333333-' + vm.picture3);
                            //}
                            $('#imgadd' + number).css('display', 'none');
                        }
                        reader.readAsDataURL(file);
                        //alert(1);
                    }
                },
                confirm: function () {
                    var phone_number = /^[1][3,4,5,7,8][0-9]{9}$/;
                    var mailbox = new RegExp("^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$");
                    var name = /^[\u4e00-\u9fa5]{2,4}$/;
                    var id_card = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
                    if (!name.test(vm.car_info.name)) {
                        $("#name").focus();
                        $.toast('输入错误提示', '请输入正确的车主姓名');
                        return;
                    }
                    if (!id_card.test(vm.car_info.id_card)) {
                        $("#id_card").focus();
                        $.toast('输入错误提示', '请输入正确的身份证号');
                        return;
                    }

                    if (!phone_number.test(vm.car_info.phone_number)) {
                        $("#phone_number").focus();
                        $.toast('输入错误提示', '请输入正确的手机号');
                        return;
                    }

                    if (vm.car_info.car_frame_number == '') {
                        $("#car_frame_number").focus();
                        $.toast('输入错误提示', '请输入车架号');
                        return;
                    }

                    if (vm.car_info.robber_number == '') {
                        $("#robber_number").focus();
                        $.toast('输入错误提示', '请输入防盗编号');
                        return;
                    }

                    if (vm.car_info.car_brand == '') {
                        $("#car_brand").focus();
                        $.toast('输入错误提示', '请输入车牌号');
                        return;
                    }
                    if (vm.car_info.form_effective_time == '') {
                        $("#form_effective_time").focus();
                        $.toast('输入错误提示', '请输入保单生效日期');
                        return;
                    }
                    if (!name.test(vm.car_info.registrant)) {
                        $("#registrant").focus();
                        $.toast('输入错误提示', '请输入正确登记人姓名');
                        return;
                    }
                    if (vm.car_info.add_coverage == '') {
                        $("#add_coverage").focus();
                        $.toast('输入错误提示', '请输入增加保额');
                        return;
                    }
                    if (vm.car_info.buying_time == '') {
                        $("#buying_time").focus();
                        $.toast('输入错误提示', '请输入购买日期');
                        return;
                    }
                    if (vm.car_info.address == '') {
                        $("#address").focus();
                        $.toast('输入错误提示', '请输入地址');
                        return;
                    }
                    if (vm.car_info.remarks == '') {
                        $("#remarks").focus();
                        $.toast('输入错误提示', '请输入备注');
                        return;
                    }
                    vm.addinfo();
                },
                addinfo: function () {
                    var car_info = {
                        name: vm.car_info.name,//姓名
                        phone_number: vm.car_info.phone_number,//手机号
                        id_card: vm.car_info.id_card,//身份证
                        car_model: vm.car_info.car_model,//车辆型号,1二轮电动车2.二轮摩托车3.三轮电动车4.三轮摩托车
                        car_frame_number: vm.car_info.car_frame_number,//车架号
                        robber_number: vm.car_info.robber_number,//防盗编号,
                        is_newcar: vm.car_info.is_newcar,//是否新车,
                        car_brand: vm.car_info.car_brand,//车牌号
                        car_robber_form: vm.car_info.car_robber_form,//车辆被盗保险单,1车辆被盗保险2年2.车辆被盗保险3年
                        form_effective_time: vm.car_info.form_effective_time,//保单生效日期
                        obligation_form: vm.car_info.obligation_form,//三者责任保险单，1.三者责任保险0年2.三者责任保险1年3.三者责任保险2年4.三者责任保险3年
                        locality: vm.car_info.locality,//地区1.汩罗
                        hurt_form: vm.car_info.hurt_form,//意外伤害保险单，1.意外伤害保险0年2.意外伤害保险1年3.意外伤害保险2年4.意外伤害保险3年
                        registrant: vm.car_info.registrant, //登记人
                        add_form: vm.car_info.add_form,//增加保险，1.增加至第1年，2.增加至第2年，3.增加至第3年，
                        add_coverage: vm.car_info.add_coverage,//增加保额
                        buying_time: vm.car_info.buying_time,//购买日期
                        address: vm.car_info.address,//地址
                        remarks: vm.car_info.remarks,//备注

                    }
                    console.log(car_info)
                    var formData = new FormData();
                    var token = localStorage.getItem("token");
                    var picture1 = document.getElementById("xdaTanFileImg1").files;
                    var picture2 = document.getElementById("xdaTanFileImg2").files;
                    var picture3 = document.getElementById("xdaTanFileImg3").files;
                    formData.append("car_Info", JSON.stringify(car_info));
                    if (picture1)
                        formData.append("picture1", picture1[0]);
                    if (picture2)
                        formData.append("picture2", picture2[0]);
                    if (picture3)
                        formData.append("picture3", picture3[0]);
                    $.ajax({
                        url: '' + vm.localurl + '/Car/Insert',
                        data: formData,
                        cache: false,
                        contentType: false,
                        processData: false,
                        type: "POST",
                        xhrFields: {
                            withCredentials: true
                        },
                        beforeSend: function (xhr) {
                            xhr.setRequestHeader("token", token);
                        },
                        success: function (data) {
                            if (data.err) {
                                $.toast(data.err);
                            }
                            else {
                                $.toast("添加成功！");
                                setTimeout(function () {
                                    $.router.back();
                                }, 2000)
                            }
                        },
                        error: function () {

                        }
                    });
                },
            }
        })
    </script>
</body>
</html>